<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :placeholder="false" navType="goods" :title='pageTitle' :bgColor="bgColor" :product="product">
		</w-navbar>
		<!-- 主图部分 -->
		<w-product-details-card :product='product'></w-product-details-card>



		<view class="plr-16 ptb-12">
			<!-- 盲盒藏品 -->
			<w-product-box :product='product'></w-product-box>
			<!-- 商品信息 -->
			<!-- <w-product-info-list  class='mt-12' :product='product'></w-product-info-list> -->
			<!-- 商品介绍 -->
			<w-product-introduce class='mt-12' :product='product'></w-product-introduce>
			<!-- 购买须知 -->
			<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
			<!-- 版权 -->
			<w-copyright></w-copyright>
		</view>

		<shop-goods-action :info='info' />
	</w-container>
</template>

<script>
	import {
		getGoodsInfo
	} from '@/api/shop/shop.js'
	import product from '@/mixins/product.js';
	// import productMixin from '@/mixins/product.js'
	import opacityMixin from '@/mixins/opacityNav.js'
	import ShopGoodsAction from '../components/shop-goods-action.vue'

	export default {
		mixins: [opacityMixin],
		components: {
			ShopGoodsAction
		},
		data() {
			return {
				loading: false,
				params: {
					goods_id: null,
				},
				info: {
					product: {
						goods_type: 1,
						publisher: {},
						series: {},
						crystal: {}
					}
				}
			};
		},
		computed: {
			infoMap() {
				return {
					series_name: this.product.series?.name
				}
			},
			product() {
				return this.info.product;
			}
		},
		onLoad({
			id,
			blind_box_id
		}) {
			this.params.goods_id = id;
			this.params.id = blind_box_id
		},
		onShow() {
			this.getDetails();
		},
		onPullDownRefresh() {
			this.getDetails()
		},
		methods: {
			async getDetails() {
				this.loading = true
				try {
					let res = await getGoodsInfo(this.params)
					this.info = res.data;
					this.$set(this.info, 'product', this.$tools.copyObj(this.info.data));
					this.info.product.goods_type = 1;
					let {
						crystal_type,
						crystal_number,
						stock,
						main_image
					} = this.info
					this.info.product.crystal = {
						crystal_type,
						crystal_price: crystal_number,
						stock
					}
					this.info.product.name=this.info.goods_name
					this.info.product.main_image = main_image
				} catch (e) {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			targetLike() {
				this.$set(this.product, 'is_like', !this.product.is_like)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#colection {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
</style>
